<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('角色管理')"></head>
    <link rel="stylesheet"  th:href="@{/static/plugin/ztree/css/metroStyle/metroStyle.css}"/>
    <script type="text/javascript"  th:src="@{/static/plugin/ztree/js/jquery.ztree.core.js}"></script>
    <script type="text/javascript"  th:src="@{/static/plugin/ztree/js/jquery.ztree.excheck.js}" charset="utf-8"></script>
</head>
<body>
<div class="x-body">
    <form class="layui-form layui-form-pane" style="margin-left: 20px;">
        <div style="width:100%;height:500px;overflow: auto;">
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">角色信息</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <label for="roleName" class="layui-form-label">
                    <span class="x-red">*</span>角色名称
                </label>
                <div class="layui-input-inline">
                    <input type="hidden" name="roleId" id="roleId" th:value="${role?.roleId}"/>
                    <input type="text"  id="roleName" name="roleName"  lay-verify="rolename"
                           autocomplete="off" class="layui-input" th:value="${role?.roleName}"/>
                </div>
                <div id="ms" class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span><span id="ums">角色名称必填</span>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="roleDesc" class="layui-form-label"> 角色备注 </label>
                    <div class="layui-input-inline">
                        <input type="text" id="roleDesc" name="roleDesc"
                               autocomplete="off" class="layui-input" th:value="${role?.roleDesc}"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">权限</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="roleDesc" class="layui-form-label">
                        <span class="x-red">*</span>权限选择
                    </label>
                    <div class="layui-input-inline">
                        <ul id="treePermiss" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <div style="height: 60px"></div>
        </div>
        <span th:if="${param.detail == null}">
            <div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6;
                position: fixed;bottom: 1px;margin-left:-20px;">
                <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">
                    <button  class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="x">
                        保存
                    </button>
                    <button  class="layui-btn layui-btn-primary" id="close">
                        取消
                    </button>
                </div>
            </div>
        </span>
    </form>
</div>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
    var setting = {
        check: { enable: true },
        data: { simpleData: { enable: true}, key :{url:"action",icon:''}}
    };

    var zNodes = [];

    $(document).ready(function(){
        var usedPermissionUrl = /*[[@{/system/permission/all/used}]]*/ "/system/permission/all/used";
        jQuery.ajax({url: usedPermissionUrl, async: false, type: 'post', dataType:"json",
            success: function (result) {
                var ownerPermissions = [[${rolePermission}]];
                if(ownerPermissions){
                    ownerPermissions = JSON.parse(ownerPermissions);
                }
                var array = result.data;
                for(var n in array){
                    if(ownerPermissions){
                        for(var j in ownerPermissions){
                            if(array[n].nodeId == ownerPermissions[j].nodeId){
                                array[n].checked = true;
                                break;
                            }
                        }
                    }
                    if("index" == array[n].nodeCode || "indexMenuTree" == array[n].nodeCode){
                        array[n].checked = true;
                    }
                }
                zNodes = treeStructure.getTreeStructureNodes({items:array});
            }
        });
        var treeObj = $.fn.zTree.init($("#treePermiss"), setting, zNodes);
        treeObj.expandAll(true);
    });

    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form ,layer = layui.layer;

        //自定义验证规则
        form.verify({
            rolename: function(value){
                if(value.trim()==""){
                    return "角色名不能为空";
                }
            }
        });

        $('#close').click(function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
        //监听提交
        form.on('submit(add)', function(data){
            var zTree = $.fn.zTree.getZTreeObj("treePermiss");
            var jsonArr= zTree.getCheckedNodes(true);
            var permissions=[];
            for(var item in jsonArr){
                permissions.push(jsonArr[item].id);
            }

            if(permissions.length == 0){
                layuiUtils.toastMsg({content: "请选择角色对应的权限!",icon:'fail', anim:'fail'});
                return false;
            }

            data.field.permissions=permissions.join(",");
            var url =  /*[[@{/system/role/saveRole}]]*/ "/system/role/saveRole";
            layerAjax(url, data.field, 'roleList');
            return false;
        });
    });
/*]]>*/</script>
</body>
</html>